<template>
  <div class="search-page">
    <div class="type pointer">
      <span @click="currentType = 0" :class="currentType == 0 ? 'active' : ''">歌曲</span>
      <span @click="currentType = 1" :class="currentType == 1 ? 'active' : ''">歌单</span>
    </div>
    <el-table v-show="currentType == 0" ref="tableRef" @row-click="chooseSong" class="el-table" highlight-current-row
      :data="[...songDetailList]" style="width: 100%">
      <el-table-column prop="name" label="歌曲" width="180">
        <template #default="scope">
          {{ scope.row.name.split('-').at(-1) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="歌手" width="180">
        <template #default="scope">
          {{ scope.row.name.split('-')[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="introduction" label="专辑" />
    </el-table>
    <div v-show="currentType == 1" class="grid">
      <ShowItemText @click="goSongDetail(item)" v-for="item in [...songSheetList]" :key="item.id" :song="item" />
    </div>

  </div>

</template>

<script setup lang="ts">
import { getSearchSongDetail, getSearchSongSheet } from "@/fetch/song";
import { ISingerDetailItem, ISongItem } from "@/fetch/type";
import ShowItemText from "@/layout/components/ShowItemText.vue";
import { useAudio } from "@/utils/useAudio";
import { useDetail } from "@/utils/useDetail";

import { Ref, ref } from "vue"
import { useRoute } from "vue-router";

const route = useRoute()
const searchWord = route.params.word as string
const songDetailList = ref<ISingerDetailItem[]>([])
const songSheetList = ref<ISongItem[]>([])
const seach = async () => {
  const { data: { data } } = await getSearchSongDetail(searchWord)
  songDetailList.value = data
  const { data: { data: temp } } = await getSearchSongSheet(searchWord)
  songSheetList.value = temp
}
const url = import.meta.env.VITE_URL
seach()
const chooseSong = (e: ISingerDetailItem) => {
  currentSongList.value = songDetailList.value
  changeSong(url + e.url)
}
const { changeSong, currentSongList } = useAudio()
const { goSongDetail } = useDetail()
const currentType = ref(0)

</script>
<style lang="scss" scoped>
.search-page {
  width: 100%;
  padding: 0 4rem;

  .sheet-detail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .type {
    width: 7rem;
    font-size: 0.7rem;
    height: 2rem;
    line-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: var(--font-gray-color);

    span {
      transition: all .3s;
    }
  }

  .active {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--font-default-color);
  }

  h4 {
    padding-left: 1rem;
  }
}
</style>